<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>HTML5语义化标签+CSS3布局实例</title>
        <!--[if lt IE 9]>
            <script src=".//html5.js" type="text/javascript"></script> 
        <![endif]-->
        <style type="text/css">
            /*公共样式*/
            body,div,span,a,h1,h2,h3,h4,h5,h6,ul,li,ol,table,tr,td,th,p,img{margin:0px;padding:0px}
            ul{list-style: none;}
            .clear{clear:both;width:100%;height:5px;}
            
            #container{width:1200px;margin:0px auto;}

            #header{width:100%;height:100px;background-color:#ddd;font-size:30px;padding-left: 500px;}

            #nav{width:100%;height:50px;margin-top:5px;background:url("C:/Users/Administrator/Desktop/python笔记/网页布局实战/images/repeat.png") repeat-x 0px 0px; }
            #nav ul li{width:100px;float:left;line-height:50px; margin-left:40px;}
            #nav ul li a{
                color:#fff;
                text-decoration: none;
                line-height: 50px;
                font-size: 18px;
                font-weight: bold;
                text-align: center;
                width:100px;
                height:50px;
                display: block;
            }
            #nav ul li a:hover{color:blue;background-color:#fff;}

            
            #main{width:100%;}
            
            #article{width:900px;height:600px;float:right;background-color:#ffb6c1;}
            #article h1{text-align:center;padding:50px;}
            #article ul li a{font-size:50px;color:black;text-decoration:none;line-height: 50px; }
            #aside{width:292px;height:600px;float:left;background-color:#fafad2;font-size:30px;}
            #aside ol {
                padding: 40px;
                color:blue;
                text-decoration:none;
                line-height: 50px;
                font-size: 30px;
                text-align:center;
                padding-left: 50px;
            }
            #aside ol li{width:200px;}
            #aside ol li a{color:blue;text-decoration:none;}

            #footer{width:100%;height:70px;margin-top:5px;background-color:#8fbc8f; }

        </style>
    </head>
    <body>
        <div id="container">
            
            <header id="header"><h1>CSDN新闻</h1></header>
            
            <nav id="nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">国内</a></li>
                    <li><a href="#">国际</a></li>
                    <li><a href="#">体育</a></li>
                    <li><a href="#">财经</a></li>
                    <li><a href="#">娱乐</a></li>
                    <li><a href="#">军事</a></li>
                    <li><a href="#">教育</a></li>
                </ul>
            </nav>
            <div class="clear"></div>
            <div id="main">
                <article id="article">
                <h1>要闻</h1>
                    <ul>
                            <li><a href="#"><span>2019-06-04</span>aaaaaaaaaaaa</a></li>
                            <li><a href="#"><span>2019-06-04</span>bbbbbbbbbbbb</a></li>
                            <li><a href="#"><span>2019-06-04</span>cccccccccccc</a></li>
                            <li><a href="#"><span>2019-06-04</span>dddddddddddd</a></li>
                            <li><a href="#"><span>2019-06-04</span>eeeeeeeeeeee</a></li>
                            <li><a href="#"><span>2019-06-04</span>ffffffffffff</a></li>
                            <li><a href="#"><span>2019-06-04</span>gggggggggggg</a></li>
                            <li><a href="#"><span>2019-06-04</span>hhhhhhhhhhhh</a></li> 
                    </ul>
                    
                </article>
                <aside id="aside">
                    <ol> <h2>热搜榜</h2>
                        <li><a href="#">中美贸易战</a></li>
                        <li><a href="#">华为芯片</a></li>
                        <li><a href="#">华为系统</a></li>
                        <li><a href="#">Python</a></li>
                        <li><a href="#">股市行情</a></li>
                        <li><a href="#">娱乐明星</a></li>
                        <li><a href="#">比赛结果</a></li>
                        <li><a href="#">公务员报考</a></li>
                    </ol>
                </aside>
            </div>
            <div class="clear"></div>
            <footer id="footer">
                <h1>特别合作</h1>
            </footer>
        </div>
    </body>
</html>